<template>
    <div class="appointment-projectbilling">
        <!-- <div class="header-box">
            <div class="header-left">
                <div class="title">服务开单</div>
            </div>
        </div> -->
        <div class="projectbilling-info-box">
            <div class="pop-customer-select">
                <el-tabs v-model="activeName" :stretch="true" @tab-click="handlecheTab">
                    <el-tab-pane label="选客户（第1步）" name="1">
                        <customerSelect
                            ref="customerSelect"
                            @getCustomerData="getCustomerData"
                            :top_num_search="88"
                            :top_num_screen="144"
                            :list_box_h="200"
                        ></customerSelect
                    ></el-tab-pane>
                    <el-tab-pane label="选服务（第2步）" name="2">
                        <projectSelect
                            ref="projectSelect"
                            @editData="editData"
                            @getProjectData="getProjectData"
                            :customerid="customerInfo.id"
                            :top_num_search="88"
                            :top_num_screen="144"
                            :list_box_h="200"
                        ></projectSelect>
                    </el-tab-pane>
                </el-tabs>
                <!-- 选择客户 -->
            </div>
            <div class="projectbilling-box">
                <div class="projectbilling-info comm-list">
                    <div class="choice-box">
                        <div class="choice-info">
                            <div class="choice-info-left">
                                <div class="img-box">
                                    <img
                                        :src="
                                            customerInfo.avatar
                                                ? customerInfo.avatar
                                                : require('../../static/images/Uimg.png')
                                        "
                                    />
                                </div>
                                <div class="choice-content">
                                    <div class="title">
                                        <span>
                                            {{
                                                customerInfo.name
                                                    ? customerInfo.name
                                                    : "请选择1个客户"
                                            }}</span
                                        >
                                        <span>{{
                                            customerInfo.company
                                                ? customerInfo.company
                                                : ""
                                        }}</span>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="choice-info-right"
                                v-if="!customerInfo.name"
                            >
                                <el-button
                                    size="mini"
                                    :type="customerInfo.name ? '' : 'primary'"
                                    @click="selectCustom"
                                >
                                    选择客户
                                </el-button>
                                <el-button
                                    size="mini"
                                    type="danger"
                                    v-if="customerInfo.name"
                                    @click="delCustomer"
                                    >移除</el-button
                                >
                            </div>
                        </div>
                    </div>
                    <div class="select-content">
                        <div class="select-content-title">
                            <div class="title"><span>服务</span></div>
                            <div class="but">
                                <el-button
                                    size="mini"
                                    type="primary"
                                    @click="selectProject"
                                    v-show="projectData.length == 0"
                                    >添加服务</el-button
                                >
                            </div>
                        </div>
                        <div class="content-box" v-if="projectData.length > 0">
                            <el-checkbox-group v-model="checkedCities">
                                <div
                                    class="content-row"
                                    v-for="(item, index) in projectData"
                                    :key="index"
                                >
                                    <div
                                        class="content-row-spec is-batch"
                                        v-for="(
                                            spec_item, spec_index
                                        ) in item.spec_unit_ls"
                                        :key="spec_index"
                                        @click="contentRowSpec(item, spec_item)"
                                    >
                                        <div class="checkbox" v-show="is_batch">
                                            <el-checkbox
                                                :key="spec_item.id"
                                                :label="spec_item.id"
                                            ></el-checkbox>
                                        </div>
                                        <div class="info-box">
                                            <div class="content-info-box">
                                                <div
                                                    class="img-box"
                                                    :class="
                                                        item.onsale == 2
                                                            ? 'is-onsale'
                                                            : ''
                                                    "
                                                >
                                                    <img
                                                        :src="
                                                            item.img
                                                                ? item.img
                                                                : img_buf
                                                        "
                                                        alt=""
                                                    />
                                                </div>
                                                <div class="content-info">
                                                    <div class="content-title">
                                                        <span>{{
                                                            item.gdname
                                                        }}</span>
                                                    </div>
                                                    <div class="content-dot">
                                                        <span>{{
                                                            item.unit_title
                                                        }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="content-but"
                                                :class="
                                                    spec_item.nosale == 2
                                                        ? 'is-nosale'
                                                        : ''
                                                "
                                                v-show="!is_batch"
                                            >
                                                <div
                                                    class="content-num"
                                                    v-if="spec_item.nosale == 1"
                                                >
                                                    <span
                                                        @click.stop="
                                                            importValue(
                                                                item,
                                                                spec_item
                                                            )
                                                        "
                                                    >
                                                        <el-input
                                                            size="mini"
                                                            v-model="
                                                                spec_item.price_0
                                                            "
                                                            class="input-w"
                                                        ></el-input>
                                                    </span>

                                                    <div class="icon">x</div>
                                                    <span
                                                        @click.stop="
                                                            changeQuantity(
                                                                item,
                                                                spec_item
                                                            )
                                                        "
                                                    >
                                                        <el-input-number
                                                            size="mini"
                                                            v-model="
                                                                spec_item.number
                                                            "
                                                            :min="1"
                                                        ></el-input-number>
                                                    </span>
                                                </div>
                                                <div class="but-box-pro">
                                                    <el-button
                                                        v-if="
                                                            spec_item.nosale ==
                                                            1
                                                        "
                                                        size="mini"
                                                        @click.stop="
                                                            copyProject(
                                                                item,
                                                                spec_item
                                                            )
                                                        "
                                                        >复制</el-button
                                                    >
                                                    <el-button
                                                        size="mini"
                                                        type="danger"
                                                        @click.stop="
                                                            delProject(
                                                                item,
                                                                spec_item
                                                            )
                                                        "
                                                        >移除</el-button
                                                    >
                                                </div>
                                            </div>
                                            <div
                                                class="content-but"
                                                v-show="is_batch"
                                            >
                                                <div class="content-num">
                                                    <div class="icon">
                                                        {{ spec_item.price_0 }}
                                                        x
                                                        {{ spec_item.number }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="content-txt"
                                                v-if="spec_item.txt"
                                            >
                                                <span
                                                    >备注：{{
                                                        spec_item.txt
                                                    }}</span
                                                >
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <!-- <empty v-else /> -->
                    <div
                        class="but-box"
                        v-show="projectData.length > 0 && !is_batch"
                    >
                        <div class="settlement-info">
                            <div class="info-num">
                                <div class="num-txt">
                                    <span>数量</span
                                    ><span>{{
                                        parseFloat(settlementData.num_totle)
                                    }}</span>
                                </div>
                                <div class="num-txt">
                                    <span>折扣</span
                                    ><span class="num"
                                        >{{
                                            parseFloat(
                                                settlementData.discount_r
                                            )
                                        }}%</span
                                    >
                                </div>
                            </div>
                            <div class="info-num">
                                <div class="num-txt">
                                    <span>总价</span
                                    ><span class="num">{{
                                        settlementData.amount_zero
                                    }}</span>
                                </div>
                                <div class="num-txt">
                                    <span>优惠</span
                                    ><span class="num">{{
                                        settlementData.discount
                                    }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="settlement-but">
                            <div class="but more" @click="is_more = !is_more">
                                <i class="el-icon-more"></i>
                            </div>
                            <div class="operation-box" v-show="is_more">
                                <div class="but more" @click="modifyDiscount">
                                    <span>整单折扣</span>
                                </div>
                                <div
                                    class="but more"
                                    @click="preferentialErasure"
                                >
                                    <span>优惠抹零</span>
                                </div>
                                <div class="but more" @click="saveDraft">
                                    <span>存草稿单</span>
                                </div>
                                <div class="but more" @click="batchOperation">
                                    <span>批量操作</span>
                                </div>
                                <div class="but more" @click="abandonBilling">
                                    <span>放弃开单</span>
                                </div>
                            </div>
                            <div class="but avt" @click="submitScheduling">
                                <span>结算</span>
                            </div>
                        </div>
                    </div>
                    <div
                        class="but-box"
                        v-show="projectData.length > 0 && is_batch"
                    >
                        <div class="settlement-info">
                            <div class="info-num">
                                <div
                                    class="num-txt checked"
                                    @click="allCheckedFun"
                                >
                                    <el-checkbox
                                        v-model="is_checked"
                                    ></el-checkbox
                                    ><span class="all-txt">全选</span>
                                </div>
                            </div>
                        </div>
                        <div class="settlement-but">
                            <div class="operation-box">
                                <div class="but ext" @click="batchOperation">
                                    <span>退出</span>
                                </div>
                                <div class="but del" @click="batchRemoval">
                                    <span>移除</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 选择客户 -->
        <!-- <popCustomerSelect
            ref="popCustomerSelect"
            @getCustomerData="getCustomerData"
        ></popCustomerSelect> -->
        <!-- 选择服务 -->
        <popProjectSelectAll
            ref="popProjectSelectAll"
            @editData="editData"
            @getProjectData="getProjectData"
            :customerid="customerInfo.id"
        ></popProjectSelectAll>
        <!-- 二维码支付 -->
        <payQrcode ref="payQrcode"></payQrcode>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";
import popCustomerSelect from "./popCustomerSelect.vue";
import popProjectSelectAll from "./popProjectSelectAll.vue";
import staticConst from "../../js/const/StaticConst.js";
import customerSelect from "./customerSelect.vue";
import projectSelect from "./projectSelect.vue";
import payQrcode from "../comm/PayQrcode.vue";
import empty from "../comm/empty.vue";

export default {
    name: "appointmentScheduling",
    components: {
        popCustomerSelect,
        popProjectSelectAll,
        payQrcode,
        customerSelect,
        projectSelect,
        empty,
    },
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            customerInfo: {},
            projectData: [],
            settlementData: {},
            checkedCities: [],
            is_more: true,
            is_batch: false,
            is_checked: false,
            listTotal: 0,
            activeName: "1",
        };
    },
    methods: {
        async initData() {
            this.emptyData();
            await this.getSettlementData();
            this.$nextTick(() => {
                this.$refs.customerSelect.initData();
                this.$refs.projectSelect.initData();
            });
        },
        handlecheTab() {
            if (
                this.activeName == 2 &&
                this.$refs.projectSelect.search_type_data.length == 0
            ) {
                this.$refs.projectSelect.getSearchtypeList();
            }
            if (this.activeName == 1) {
                this.$refs.projectSelect.setshowStatus();
            } else {
                this.$refs.customerSelect.setshowStatus();
            }
        },
        // 弹出二维码
        successfulSettlement(data) {
            this.initData();
            let obj = {};
            obj.payType = data.paytype;
            obj.objtype = staticConst.PAY_OBJ_02;
            obj.odid = data.odid;
            obj.money_pay = data.amount_receive;
            this.$refs.payQrcode.creatQrcode(obj);
        },
        // 选择客户
        async getCustomerData(data) {
            let param = { allCount: 0.0, customerid: data.id, totalMoney: 0.0 };
            let url = config.YY_ORDER_CART_SAVE;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.customerInfo = data;
            }
        },
        //移除客户
        async delCustomer() {
            let param = {
                allCount: "0",
                customerid: "",
                totalMoney: "0",
            };
            let url = config.YY_ORDER_CART_SAVE;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.initData();
            }
        },
        // 编辑服务
        editData(param) {
            this.saveFun(param);
        },
        // 选择服务
        getProjectData(param) {
            console.log("param", param);
            this.saveFun(param);
        },
        // 结算
        submitScheduling() {
            const is_onsale = this.projectData.some((v) => {
                return v.onsale == 2;
            });
            if (is_onsale) {
                this.$confirm("购物车内存在已下架服务，是否清除", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.emptyData();
                        this.getSettlementData("offsale_do");
                    })
                    .catch(() => {});
                return;
            }
            if (this.customerInfo.id) {
                const data = {
                    customerInfo: this.customerInfo,
                };

                this.$emit("submitScheduling", data);
            } else {
                this.$msg({ title: "请选择客户" });
            }
        },

        // 获取结算列表信息
        async getSettlementData(data = null) {
            let param = {};
            if (data === "offsale_do") {
                param.offsale_do = "1";
            }
            let url = config.YY0_CART_INFO;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.is_batch = false;
                this.settlementData = res.data;
                if (res.data.customer) {
                    this.customerInfo = res.data.customer;
                } else {
                    this.customerInfo = {};
                }
                if (res.data.gd_ls) {
                    this.listTotal = 0;
                    res.data.gd_ls.map((v) => {
                        v.spec_unit_ls.map((vs) => {
                            this.listTotal++;
                            vs.number = parseInt(vs.number);
                        });
                    });
                    this.projectData = res.data.gd_ls;
                } else {
                    this.projectData = [];
                }
            }
            console.log(this.projectData, "this.projectData");
        },
        //改变价格
        importValue(item, spec_item) {
            this.$prompt("输入价格", "修改价格", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                inputPattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/,
                inputErrorMessage: "请输入数字，可包含俩位小数点",
                inputValue: spec_item.price_0,
            })
                .then(async ({ value }) => {
                    let param = {
                        allCount: 0,
                        customerid: this.customerInfo.id || "",
                        gdid: item.gdid,
                        spec_unit_ls: [
                            {
                                discount_r: spec_item.discount_r,
                                id: spec_item.id,
                                isChangePriceId: false,
                                number: spec_item.number,
                                price_0: value,
                                price_i: spec_item.price_i,
                                txt: spec_item.txt,
                            },
                        ],
                        totalMoney: 0,
                        type: "1",
                    };
                    this.saveFun(param);
                })
                .catch(() => {});
        },
        // 改变数量
        changeQuantity(item, spec_item) {
            let param = {
                allCount: 0,
                customerid: this.customerInfo.id || "",
                gdid: item.gdid,
                spec_unit_ls: [
                    {
                        discount_r: spec_item.discount_r,
                        id: spec_item.id,
                        isChangePriceId: false,
                        number: spec_item.number,
                        price_0: spec_item.price_0,
                        price_i: spec_item.price_i,
                        txt: spec_item.txt,
                    },
                ],
                totalMoney: 0,
                type: "1",
            };
            this.saveFun(param, false);
        },
        // 全选
        allCheckedFun() {
            this.checkedCities = [];
            this.is_checked = !this.is_checked;
            this.projectData.map((v) => {
                v.spec_unit_ls.map((vs) => {
                    if (this.is_checked) {
                        this.checkedCities.push(vs.id);
                    } else {
                        this.checkedCities = [];
                    }
                });
            });
        },
        // 单选
        contentRowSpec(item, spec_item) {
            if (this.is_batch) {
                let bool = this.checkedCities.indexOf(spec_item.id) > -1;
                if (bool) {
                    this.checkedCities.splice(
                        this.checkedCities.indexOf(spec_item.id),
                        1
                    );
                } else {
                    this.checkedCities.push(spec_item.id);
                }
                if (this.checkedCities.length == this.listTotal) {
                    this.is_checked = true;
                } else {
                    this.is_checked = false;
                }
            } else {
                if (spec_item.nosale == 2) {
                    this.delNosalegd(item, spec_item);
                } else {
                    const data = {
                        customerid: this.customerInfo.id || "",
                        fillingForm: spec_item,
                        porjectData: item,
                    };
                    data.fillingForm.price_type = String(spec_item.price_i);
                    this.selectProjectDetails(data);
                }
            }
        },
        // 批量操作
        batchOperation() {
            this.is_batch = !this.is_batch;
            this.checkedCities = [];
            this.is_checked = false;
        },
        // 单个移除
        delProject(item, spec_item) {
            this.$confirm("确定删除?", "删除", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let param = {
                        allCount: "0",
                        gdid: item.gdid,
                        spec_unit_ls: [
                            {
                                id: spec_item.id,
                                isChangePriceId: false,
                                number: "0",
                            },
                        ],
                        totalMoney: "0",
                    };
                    this.saveFun(param);
                })
                .catch(() => {});
        },
        // 批量移除
        batchRemoval() {
            let param = {
                allCount: "0",
                customerid: this.customerInfo.id || "",
                spec_unit_ls_m: [],
                totalMoney: "0",
                type: "1",
            };
            this.projectData.map((v) => {
                v.spec_unit_ls.map((vs) => {
                    this.checkedCities.map((vw) => {
                        if (vw == vs.id) {
                            param.spec_unit_ls_m.push({
                                gdid: v.gdid,
                                id: vs.id,
                                isChangePriceId: false,
                                number: "0",
                                spec_dir: "",
                                specid: "0",
                                txt: "",
                                unitid: "0",
                            });
                        }
                    });
                });
            });
            this.saveFun(param);
        },
        // 放弃开单
        abandonBilling() {
            this.$confirm("您确定放弃开单吗?", "放弃开单", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let param = {
                        empty: "1",
                    };
                    this.saveFun(param);
                })
                .catch(() => {});
        },
        // 存草稿
        saveDraft() {
            this.$confirm("您确定要把当前单据存入草稿单?", "存草稿单", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    let param = {
                        amount: this.settlementData.amount_totle,
                        amount_zero: this.settlementData.amount_zero,
                        discount_r: this.settlementData.discount_r,
                        backup: "1",
                    };
                    let url = config.YY_ORDER_ORDER_ADD;
                    let res = await this.$api({ url: url, data: param });
                    if (res.status == 1) {
                        this.initData();
                    }
                })
                .catch(() => {});
        },
        // 优惠抹零
        preferentialErasure() {
            this.$prompt("输入抹零后的价格", "优惠抹零", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                inputPattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
                inputErrorMessage: "请输入数字且大于0，可包含俩位小数点",
            })
                .then(async ({ value }) => {
                    console.log(value, this.settlementData);
                    if (
                        Number(value) > Number(this.settlementData.amount_totle)
                    ) {
                        this.$msg({ title: "抹零后的价格不能超过订单原价" });
                        return;
                    }
                    let param = {
                        amount: this.settlementData.amount_totle,
                        discount_r: 0,
                        zero: value,
                    };
                    this.countFun(param);
                })
                .catch(() => {});
        },
        //整单折扣
        modifyDiscount() {
            this.$prompt("输入折扣百分比", "整单折扣", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                inputPattern: /^(?:0|[1-9][0-9]?|100)(\.[0-9]{0,2})?$/,
                inputErrorMessage: "请输入0-100的数字，可包含俩位小数点",
            })
                .then(async ({ value }) => {
                    if (value > 100) {
                        this.$msg({ title: "折扣不能大于100" });
                        return;
                    }
                    let param = {
                        amount: this.settlementData.amount_totle,
                        discount_r: value,
                        zero: 0,
                    };
                    this.countFun(param);
                })
                .catch(() => {});
        },
        //复制服务
        copyProject(item, spec_item) {
            let param = {
                allCount: 0,
                customerid: this.customerInfo.id || "",
                gdid: item.gdid,
                spec_unit_ls: [
                    {
                        discount_r: spec_item.discount_r,
                        isChangePriceId: false,
                        number: spec_item.number,
                        price: spec_item.price,
                        price_0: spec_item.price_0,
                        price_i: spec_item.price_i,
                        randstr: this.getRandomSixDigit(),
                    },
                ],
                totalMoney: 0,
                type: "1",
            };
            this.saveFun(param);
        },

        // 打开客户列表
        selectCustom() {
            this.activeName = "1";
            if (this.$refs.projectSelect.getshowStatus()) {
                this.$refs.customerSelect.searchfocusFun();
            }
            this.$refs.projectSelect.setshowStatus();
        },
        // 打开服务列表
        selectProject() {
            this.activeName = "2";
            if (this.$refs.projectSelect.search_type_data.length == 0) {
                this.$refs.projectSelect.getSearchtypeList();
            }
            if (this.$refs.customerSelect.getshowStatus()) {
                this.$refs.projectSelect.searchfocusFun();
            }
            this.$refs.customerSelect.setshowStatus();
        },
        // 打开服务详情
        selectProjectDetails(data) {
            this.$refs.popProjectSelectAll.projectDetails(data);
        },
        // 返回
        backFun() {
            this.$emit("backFun");
        },
        // 清除数据
        emptyData() {
            this.customerInfo = {};
            this.projectData = [];
            this.settlementData = {};
        },
        // 产品发生变动的操作
        commodityChanges() {
            this.$confirm("当前产品已变动，是否重置折扣与抹零?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    let param = {
                        amount: this.settlementData.amount,
                        discount_r: "100",
                        zero: "0",
                    };
                    this.countFun(param, "2");
                })
                .catch(() => {
                    this.getSettlementData();
                });
        },
        // 删除无效产品
        delNosalegd(item, spec_item) {
            this.$confirm("该产品已下架，是否删除", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    const param = {
                        allCount: 0,
                        gdid: item.gdid,
                        spec_unit_ls: [
                            {
                                id: spec_item.id,
                                isChangePriceId: false,
                                number: 0,
                            },
                        ],
                        totalMoney: 0,
                    };
                    this.saveFun(param);
                })
                .catch(() => {
                    this.getSettlementData();
                });
        },
        // 操作购物车的方法
        async saveFun(param, is_reset = true) {
            let url = config.YY_ORDER_CART_SAVE;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.$refs.popProjectSelectAll.dialogVisible = false;
                if (
                    parseFloat(this.settlementData.discount_r) < 100 ||
                    parseFloat(this.settlementData.discount) > 0
                ) {
                    this.commodityChanges();
                    return;
                }

                this.getSettlementData();
            }
        },
        // 操作价格变动的方法
        async countFun(param, type = "1") {
            let url = config.YY_ORDER_ORDER_COUNT;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (type == 1) {
                    this.getSettlementData();
                } else {
                    this.initData();
                }
            }
        },

        // 生成随机数
        getRandomSixDigit() {
            let code = "";
            for (var i = 0; i < 6; i++) {
                code += parseInt(Math.random() * 10);
            }
            return code;
        },
    },
};
</script>

<style lang="scss" scoped>
.appointment-projectbilling {
    height: 100vh;
    margin-left: 0;
    width: 100%;
    background-color: #fff;

    .projectbilling-info-box {
        height: 100%;
        display: flex;
        ::v-deep .pop-customer-select {
            width: 345px;
            height: 100%;
            padding-top: 65px;
            border-right: 1px #ececec solid;
            // padding: 10px;
            .el-tabs__content {
                overflow: inherit;
            }
            .el-tabs__header {
                margin: 0;
            }
            .el-tabs__nav-scroll {
                display: flex;
                justify-content: center;
                // .el-tabs__item {
                //     padding: 0 50px;
                // }
            }
        }
        .projectbilling-box {
            width: calc(100% - 345px);
            height: calc(100% - 50px);
            position: relative;
            .projectbilling-info {
                width: calc(100% - 20px);
                height: calc(100% - 70px);
                padding: 10px;
                overflow: auto;
                .choice-box {
                    border: 1px #e8dcdc solid;
                    margin-bottom: 20px;
                    padding: 10px;
                    .choice-info {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .choice-info-left {
                            display: flex;
                            align-items: center;
                            .img-box {
                                width: 80px;
                                height: 80px;
                                border-radius: 50%;
                                overflow: hidden;
                                margin-right: 10px;
                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                            .choice-content {
                                font-size: 14px;
                                .title {
                                    span {
                                        margin-right: 10px;
                                    }
                                }
                            }
                        }
                        .choice-info-right {
                            display: flex;
                            align-items: center;
                        }
                    }
                }
                .select-content {
                    border: 1px #e8dcdc solid;
                    margin-bottom: 20px;
                    .select-content-title {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 10px;
                        height: 30px;
                        .title {
                            font-size: 14px;
                            font-weight: bold;
                        }
                    }

                    .content-box {
                        border-top: 1px #e8dcdc solid;
                        padding: 10px 0;
                        font-size: 14px;
                        .content-row {
                            border-bottom: 1px #e8dcdc solid;
                            margin-bottom: 10px;
                            padding-bottom: 10px;
                            .content-row-spec {
                                padding: 0 10px;
                                border-bottom: 1px #e8dcdc solid;
                                margin-bottom: 10px;
                                padding-bottom: 10px;
                                display: flex;
                                &:last-child {
                                    padding: 0 10px;
                                    margin: 0;
                                    border: none;
                                }
                                &.is-batch {
                                    cursor: pointer;
                                }
                            }
                            ::v-deep.checkbox {
                                display: flex;
                                align-items: center;
                                margin-right: 10px;
                                pointer-events: none;
                                .el-checkbox__label {
                                    display: none;
                                }
                            }
                            .info-box {
                                width: 100%;
                            }
                            &:last-child {
                                margin-bottom: 0;
                                padding-bottom: 0;
                                border: none;
                            }
                            .content-info-box {
                                display: flex;
                                align-items: center;
                                .img-box {
                                    width: 80px;
                                    height: 80px;
                                    margin-right: 10px;
                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                    }
                                    &.is-onsale {
                                        position: relative;
                                        &::before {
                                            content: "已下架";
                                            position: absolute;
                                            text-align: center;
                                            top: 0;
                                            left: 0;
                                            width: 100%;
                                            height: 20px;
                                            font-size: 12px;
                                            background: #3388ff;
                                            color: #fff;
                                        }
                                    }
                                }
                                .info {
                                    display: flex;
                                    align-items: center;
                                }
                                .img-box {
                                    width: 80px;
                                    height: 80px;
                                    margin-right: 10px;
                                    border-radius: 5px;
                                    overflow: hidden;
                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                    }
                                }
                                .content-info {
                                    .content-title {
                                        span {
                                            font-size: 14px;
                                            margin-right: 10px;
                                        }
                                        .tag {
                                            font-size: 12px;
                                            padding: 0 3px 2px;
                                            border: 1px #ff7b23 solid;
                                            color: #ff7b23;
                                            border-radius: 3px;
                                        }
                                    }
                                    .content-dot {
                                        span {
                                            font-size: 12px;
                                            color: #949494;
                                            margin-right: 20px;
                                        }
                                    }
                                }
                            }

                            .content-but {
                                display: flex;
                                justify-content: space-between;
                                margin-top: 10px;
                                &.is-nosale {
                                    justify-content: flex-end;
                                }
                                .content-num {
                                    display: flex;
                                    align-items: center;
                                    .input-w {
                                        width: 100px;
                                        margin-right: 10px;
                                    }
                                    .icon {
                                        font-size: 12px;
                                        margin-right: 10px;
                                        font-weight: bold;
                                    }
                                }
                            }
                            .content-txt {
                                margin-top: 10px;
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }

    .header-box {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px #e8dcdc solid;
        padding: 0 10px;
        padding-right: 20px;
        display: flex;
        .header-left {
            display: flex;
            .back {
                font-size: 20px;
                margin-right: 10px;
                cursor: pointer;
            }
            .title {
                font-size: 18px;
            }
        }
    }
    .but-box {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 60px;
        width: 100%;
        border-top: 1px #e8dcdc solid;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .settlement-info {
            font-size: 12px;
            display: flex;
            margin-left: 10px;
            .info-num {
                margin-right: 30px;

                .num-txt {
                    &.checked {
                        padding-left: 10px;
                        cursor: pointer;
                        ::v-deep .el-checkbox {
                            pointer-events: none;
                        }
                    }
                    span {
                        margin-right: 10px;
                    }

                    .num {
                        color: #fb6868;
                    }
                    .all-txt {
                        margin-left: 10px;
                    }
                }
            }
        }
        .settlement-but {
            height: 100%;
            display: flex;
            .operation-box {
                display: flex;
            }
            .but {
                height: 100%;
                padding: 0 20px;
                font-size: 16px;
                display: flex;
                align-items: center;
                cursor: pointer;
                &.more {
                    border-left: 1px #e8dcdc solid;
                    &:hover {
                        opacity: 0.8;
                        background: #ecebeb;
                    }
                }

                &.avt {
                    padding: 0 40px;
                    background: #3388ff;
                    color: #fff;
                    &:hover {
                        background: #5498f7;
                    }
                }
                &.ext {
                    background: #3388ff;
                    padding: 0 40px;
                    color: #fff;
                    &:hover {
                        opacity: 0.8;
                    }
                }
                &.del {
                    background: #fa4848;
                    color: #fff;
                    padding: 0 40px;
                    &:hover {
                        opacity: 0.8;
                    }
                }
            }
        }
    }
}
</style>